<template>
	<view>
		<view class="page__content">
			<z-paging ref="paging" :refresher-only="true" :fixed="true" @query="getTopNumsData" :topZIndex="9999999"
				:bottomZIndex="999999">
				<template #top>
					<up-navbar :fixed="false" title="看板" :autoBack="false" leftIcon=" " :safeAreaInsetTop="true">
					</up-navbar>


					<!-- 时间选择器 -->
					<view class="example-body x-bc">
						<m-dropdown-menu :options="pageConfig.SearchCheckList" v-model="pageConfig.CheckedSearchData"
							KeyID="value" marginTop="10" :zIndex="pageConfig.PickerIndex == 1 ? 999999 : 1"
							@selectItem="onChoiceCell">
							<template #default="{element}">
								<view class="x-f MenuText" :style="{color: element ? '#1251e2' : '#fff'}">
									<text>{{pageConfig.CheckedSearchData['text']}}</text>

									<up-icon :name="element ? 'arrow-up-fill':'arrow-down-fill'"
										:color="element ? '#1251e2' : '#fff'" size="14"
										style="margin-left: 4px;"></up-icon>
								</view>
							</template>
						</m-dropdown-menu>

						<uni-datetime-picker v-model="pageConfig.singleTimes" @maskClick="pageConfig.PickerIndex = 1"
							@show="pageConfig.PickerIndex = 99999999999" :style="{'z-index':pageConfig.PickerIndex}"
							@change="onChangeDate" type="daterange" :end="pageConfig.EndDate"
							rangeSeparator="至"></uni-datetime-picker>
					</view>
				</template>

				<view class="page__content__main">
					<view class="x-bc">
						<view class="ItemCard" v-for="item in ModleList" :key="item.id" @click="openPermissionDialog">

							<u-icon size="50rpx" :name="item.Icon"></u-icon>

							<text style="margin-top: 16rpx;font-size: 34rpx;font-weight: 600;">{{item.ShowText}}</text>

							<text style="margin-top: 16rpx;font-size: 20rpx;color: #999;">{{item.Text}}</text>
						</view>
					</view>


					<!-- 消息滚动 -->
					<view @click="openBroadcastPopup">
						<m-carousel-roll :list="RollList" emptyText="暂无播报"
							style="border-radius: 12px;margin-top: 24rpx;padding-left: 18rpx;"
							:title-item-style="{'font-size':'32rpx'}">
							<template v-slot:customLeft>
								<view class="my-custom-text-style x-f"
									style="background-color: #fff3f5;border-radius: 10px;justify-content: center;padding: 4px;">
									<u-icon name="volume-fill" color="#ff8e62" size="34rpx"></u-icon>
								</view>
							</template>
						</m-carousel-roll>
					</view>


					<!-- 完成数量统计 -->
					<view class="CommonCardBox">
						<view class="CommonCard_TopBox">
							<u-cell title="完成数量统计" :border="false"
								:titleStyle="{'font-size':'30rpx','letter-spacing':'2rpx'}">
								<view slot="icon">
									<view class="CommonCard_TitleLeftIcon FinishIconBac">
										<u-icon size="32rpx"
											:name="uni.$utils.getResourceUrl('assets/image/icon/FinishNum.png')"></u-icon>
									</view>
								</view>
							</u-cell>
						</view>

						<view class="CommonCard_Main">

							<view class="LineBox" v-for="(item,index) in FisishData" :key="index">
								<view class="x-f TextBox">
									<view class="Line_Left" style="flex: 1;">
										<text>{{item.ProductName}}</text>
									</view>

									<view class="Line_Right">
										<text>{{item.WCQty}}</text>
									</view>
								</view>

								<view style="padding-bottom: 30rpx;border-bottom: 2px solid #f7f7f7;">
									<u-line-progress :percentage="(item.WCQty / item.FPlanQty)"
										activeColor="#3ed27e"></u-line-progress>
								</view>
							</view>

							<u-empty v-if="!FisishData.length" mode="data" text="暂无数据"
								:icon="uni.$utils.getResourceUrl('image/Img/history.png')" width="40vw" height="40vw"
								textSize="28rpx">
							</u-empty>
						</view>
					</view>


					<!-- 工序执行进度 -->
					<view class="CommonCardBox">
						<view class="CommonCard_TopBox">
							<u-cell title="工序执行进度" :border="false"
								:titleStyle="{'font-size':'30rpx','letter-spacing':'2rpx'}">
								<view slot="icon">
									<view class="CommonCard_TitleLeftIcon GXIconBac">

										<u-icon size="32rpx"
											:icon="uni.$utils.getResourceUrl('assets/image/icon/GXZXJD.png')"></u-icon>
									</view>
								</view>
							</u-cell>
						</view>

						<view class="CommonCard_Main">

							<view class="charts-box">
								<qiun-data-charts type="mix" :opts="opts" :ontouch="true" onzoom :chartData="chartData">

								</qiun-data-charts>
							</view>
						</view>
					</view>


					<!-- 员工报工排行 -->
					<view class="CommonCardBox">
						<view class="CommonCard_TopBox">
							<u-cell title="员工报工排行" :border="false"
								:titleStyle="{'font-size':'30rpx','letter-spacing':'2rpx'}">
								<view slot="icon">
									<view class="CommonCard_TitleLeftIcon YGBGPHIconBack">
										<u-icon size="32rpx"
											:name="uni.$utils.getResourceUrl('assets/image/icon/YGBGPH.png')"></u-icon>
									</view>
								</view>
							</u-cell>
						</view>

						<view class="CommonCard_Main">

							<view style="padding: 10rpx 20rpx;">
								<u-cell>
									<template #title>
										<text style="color: #999;">排名</text>
									</template>
									<template #value>
										<text style="color: #999;">数量</text>
									</template>
								</u-cell>


								<u-cell BottomColor="#f3f3f3" v-for="(item,index) in rankingData"
									:key="item.FProcessMan">

									<template #title>
										<view class="x-f">
											<u-icon v-if="index <= 2" size="52rpx"
												:name="FormateBackFun('rank',index)"></u-icon>
											<view v-else
												style="font-size: 36rpx;width: 52rpx;text-align: center;color: #17d56b;">
												{{index + 1}}
											</view>
											<text
												style="color: #333;font-size: 28rpx;margin-left: 24rpx;">{{item.EmplName}}</text>
										</view>
									</template>


									<template #value>
										<text style="color: #ffb803;font-size:  28rpx;">{{item.FSumQty}}</text>
									</template>
								</u-cell>
							</view>

							<u-empty v-if="!rankingData.length" mode="data" text="暂无数据"
								:icon="uni.$utils.getResourceUrl('image/Img/history.png')" width="40vw" height="40vw"
								textSize="28rpx">
							</u-empty>
						</view>
					</view>

				</view>



				<template #bottom>
					<template v-if="pageConfig.PickerIndex == 1">
						<mc-tabbar style="width: 100%;" :current-page="pageConfig.currentID"></mc-tabbar>
					</template>
				</template>
			</z-paging>
		</view>

		<!-- 实时播报 -->
		<u-popup :show="BroadcastPopup" mode="bottom" :round="12" zIndex="9999999" @close="closeBroadcastPopup">
			<view class="popup__content" style="height: 80vh;">
				<u-navbar :fixed="false" title="实时播报" :autoBack="false" leftIcon=" " :safeAreaInsetTop="false"
					leftIconColor="#fff" style="width: 100%;">
					<view class="u-nav-slot" slot="right">
						<uni-icons color="#fff" type="close" size="30" @click="closeBroadcastPopup"></uni-icons>
					</view>
				</u-navbar>

				<view class="popup__content__main" v-if="BroadcastPopup">

					<m-step :options="RollList">
						<template #CardBox="{ element, index }">
							<!-- 在这里定义 CardBox 的内容 -->
							<view style="padding: 30rpx 20rpx;min-height: 100px;">
								<view class="x-f"
									style="width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
									<text style="font-size: 32rpx;color: #333;">{{element.EmplName}}</text>
									<text
										style="font-size: 32rpx;color: #333;margin-left: 6rpx;">{{element.ProcedureName}}</text>
								</view>

								<view>
									<m-field valueFontSize="26rpx" labelFontSize="26rpx" paddings="4px 0"
										:borderBottom="false" label="工单号:" :value="element.BGBillNO" valueColor="#999">
									</m-field>

									<m-field valueFontSize="26rpx" labelFontSize="26rpx" paddings="4px 0"
										:borderBottom="false" label="产品信息:" :value="element.ProductName"
										valueColor="#999"></m-field>

									<view class="x-f">
										<m-field valueFontSize="26rpx" labelFontSize="26rpx" paddings="4px 0"
											:borderBottom="false" label="良品数量:" :value="element.FDailyQtt"
											valueColor="#2ea77e"></m-field>

										<view style="margin: 0 4rpx;color: #999;font-size: 26rpx;">/</view>

										<m-field valueFontSize="26rpx" labelFontSize="26rpx" paddings="4px 0"
											:borderBottom="false" label="不良品数量:" :value="element.FNgQty"
											valueColor="#d54844"></m-field>

									</view>

								</view>
							</view>
						</template>
					</m-step>

					<u-empty v-if="!RollList.length" mode="data" text="暂无数据"
						:icon="uni.$utils.getResourceUrl('image/Img/history.png')" width="40vw" height="40vw"
						textSize="28rpx">
					</u-empty>

				</view>
			</view>
		</u-popup>

	</view>
</template>

<script setup lang="ts">
	import { reactive, computed, onMounted, ref, nextTick, getCurrentInstance } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { useMainStore, useUserStore, useTicketStore } from '@/store';

	const ticketStore = useTicketStore();
	const mainStore = useMainStore();
	const userStore = useUserStore();
	import useRequestQueue from '@/uni_modules/mc-ui/libs/http/UniversalRequestQueue';
	const { request, requestByUrl, onAllComplete, onError } = useRequestQueue();

	// import mDropdownMenu from '../components/m-dropdown-menu/m-dropdown-menu';
	import mcTabbar from '../components/mc-tabbar/mc-tabbar';



	let pageConfig = reactive<any>({
		FCJType: null,

		singleTimes: [new Date(), new Date()],
		PickerIndex: 1,
		EndDate: Date.now(),

		SearchCheckList: [
			{ text: '全部', value: 2 },
			{ text: '未审核', value: 0 },
			{ text: '已审核', value: 1 },
		],
		CheckedSearchData: { text: '全部', value: 2 },

		currentID: -1,
	});

	pageConfig.FCJType = ticketStore.FCJType;

	// 菜单下拉选
	const onChoiceCell = (data) => {
		Object.assign(pageConfig.CheckedSearchData, data);

		getTopNumsData();
	}

	// 切换时间
	const onChangeDate = () => {
		pageConfig.PickerIndex = 1;

		getTopNumsData();
	}




	// 顶部统计模块数据
	let ModleList = ref<any>([
		{ Icon: uni.$utils.getResourceUrl("assets/image/icon/Total.png"), ShowText: '0', Text: '报工总数', id: 1 },
		{ Icon: uni.$utils.getResourceUrl("assets/image/icon/FinishNum.png"), ShowText: '0', Text: '合格总数', id: 2 },
		{ Icon: uni.$utils.getResourceUrl("assets/image/icon/percentage.png"), ShowText: '1', Text: '合格率', id: 3 },
		{ Icon: uni.$utils.getResourceUrl("assets/image/icon/WorkNum.png"), ShowText: '0.00%', Text: '报工单数', id: 4 },
	]);
	// 打开实时看板弹层
	const openPermissionDialog = () => {

	}

	// 播报列表
	let RollList = ref<any>([]);
	let BroadcastPopup = ref(false);
	// 打开实时看板弹层
	const openBroadcastPopup = () => {
		BroadcastPopup.value = true;
	}
	// 关闭实时看板弹层
	const closeBroadcastPopup = () => {
		BroadcastPopup.value = false;
	}

	// 完成数量统计
	let FisishData = ref<any>([]);

	// 员工报工排行
	let rankingData = ref<any>([])

	const dateFormat = (val, Type = 'yyyy-MM-dd') => { // 格式化时间
		if (!uni.$utils.isEmpty(val)) {
			return uni.$utils.dateFormat(new Date(val), Type);
		} else {
			return uni.$utils.dateFormat(new Date(), Type);
		}
	}

	// 获取数据
	const getTopNumsData = () => {
		uni.$utils.showLoading();

		try {
			console.log({
				Approve: pageConfig.CheckedSearchData.value,
				FCJType: pageConfig.FCJType,
				FSDate: dateFormat(pageConfig.singleTimes[0]),
				FEDate: dateFormat(pageConfig.singleTimes[1]),
			});
			request({
				config: {
				},
				url: 'XGD_BulletinBoard',
				method: 'POST',
				data: {
					Approve: pageConfig.CheckedSearchData.value,
					FCJType: pageConfig.FCJType,
					FSDate: dateFormat(pageConfig.singleTimes[0]),
					FEDate: dateFormat(pageConfig.singleTimes[1]),
				},
				success: async (ret : any) => {
					console.log(ret);
					uni.$utils.hideLoading();

					if (ret.status == 200) {


						const ds0 = ret.data.ds[0];
						const list = ModleList.value;

						// 顶部看板数据
						list[0].ShowText = ds0.FSumQty;
						list[1].ShowText = ds0.FDailyQtt;
						list[2].ShowText = `${Number(ds0.OKRate).toFixed(2)}%`;
						list[3].ShowText = ds0.BGDNum;

						// 播报信息
						RollList.value = ret.data.ds1.map(item => {
							return {
								...item,
								title: item['EmplName'] + ' ' + item['ProcedureName'],
								time: dateFormat(item.BillDate, 'yyyy-MM-dd hh:mm:ss'),
								Date: dateFormat(item.BillDate, 'yyyy-MM-dd hh:mm:ss'),
							}
						});
						console.log(RollList.value);

						FisishData.value = ret.data.ds2.slice(0, 5);

						// 工序执行进度
						await getServerData(ret.data.ds3);

						// 员工报工排行
						// 按FSumQty排序
						ret.data.ds4.sort((a, b) => parseFloat(b.FSumQty) - parseFloat(a.FSumQty));
						rankingData.value = ret.data.ds4.slice(0, 5);

					}

				},
				fail(err : any) {
					uni.$utils.hideLoading();
					console.log(err);
				}
			});
		} catch (error) {
			//TODO handle the exception
			uni.$utils.hideLoading();
		}

	}

	const FormateBackFun = (str, data) => {
		if (str == 'rank') { // 员工排行
			let IconUrl = '';
			switch (data) {
				case 0:
					IconUrl = 'assets/image/icon/first.png';
					break;
				case 1:
					IconUrl = 'assets/image/icon/second.png';
					break;
				case 2:
					IconUrl = 'assets/image/icon/third.png';
					break;
				default:
					break;
			};
			return uni.$utils.getResourceUrl(IconUrl);
		}
	};

	// 工序执行进度统计图
	let chartData = ref<any>({});

	let opts = {
		color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
			"#ea7ccc"
		],
		padding: [15, 15, 0, 15],
		enableScroll: true,
		legend: {},
		// xAxis: {
		// 	disableGrid: true,
		// 	title: "单位：年"
		// },
		xAxis: {
			disableGrid: true,
			// calibration: true,
			scrollShow: true,
			itemCount: 2,
			labelCount: 12,
			lineHeight: 40,
			// min: 0,
		},
		yAxis: {
			// disabled: false,
			// disableGrid: false,
			// splitNumber: 5,
			gridType: "dash",
			dashLength: 4,
			gridColor: "#CCCCCC",
			padding: 10,
			showTitle: false,
			data: [{
				calibration: true,
				// position: "left",
				// title: " ",
				min: 0,
			}]
		},
		extra: {
			mix: {
				column: {
					width: 20
				}
			}
		}
	};

	const getServerData = async (data : any) => {
		let _categories = [],
			_FPlanQty = [],
			_FDailyQtt = [],
			_FNgQty = [];

		await data.forEach(item => {
			_categories.push(item.ProcedureName)
			_FPlanQty.push(item.FPlanQty)
			_FDailyQtt.push(item.FDailyQtt)
			_FNgQty.push(item.FNgQty)
		});


		chartData.value = {
			categories: _categories,
			series: [
				{ name: "计划数", type: "column", color: "#5470c6", data: _FPlanQty },
				{ name: "良品数", type: "column", color: "#2fc25b", data: _FDailyQtt },
				{ name: "不良品数", type: "column", color: "#ff6d33", data: _FNgQty },
			]
		};



	}


	onLoad((option : any) => {
		pageConfig.currentID = +option.TabbarID;

		setTimeout(() => {
			getTopNumsData();
		}, 300)

	})
</script>

<style lang="scss">
	.page__content {
		height: 100vh;
		background-color: #f9f9f9;

		.example-body {
			width: 100%;
			padding: 6px 20px;
			color: #fff;
			background-color: #51d0d0;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.MenuText {
				font-size: 24rpx;
				border-right: 1px solid #999;
				padding-right: 20rpx;
				// margin-right: 8rpx;
				// background-color: #fff;
				height: 100%;
			}

			.uni-date {
				background-color: #fff;

				.uni-date-editor--x {
					background-color: #fff !important;
				}

				.uni-date__icon-clear {
					background-color: #fff !important;
				}
			}

			.BtnBox {
				margin-left: 8rpx;
			}

		}



		&__main {
			padding: 20rpx;

			.ItemCard {
				width: 22%;
				border-radius: 12px;
				background-color: #fff;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 40rpx 0;
			}

			.CommonCardBox {
				padding: 20rpx;
				min-height: 200px;
				background-color: #fff;
				border-radius: 12px;
				margin-top: 24rpx;


				.CommonCard_TitleLeftIcon {
					padding: 8rpx;
					border-radius: 18rpx;
				}

				.FinishIconBac {
					background-color: rgba(132, 222, 13, .1);
				}

				.GXIconBac {
					background-color: rgba(165, 111, 233, .1);
				}

				.YGBGPHIconBack {
					background-color: rgba(244, 234, 42, .1);
				}

				.BLPFBIconBack {
					background-color: rgba(255, 111, 111, .1);
				}


				.CommonCard_RightBox {

					.Text {
						color: #51d0d0;
						margin-right: 6rpx;
						font-size: 24rpx;
					}

					.u-icon {
						font-weight: 600;
					}
				}

				.CommonCard_Main {
					padding-bottom: 20rpx;

					.charts-box {
						width: 100%;
						height: 300px;
					}

					.LineBox {
						padding: 20rpx 30rpx;

						.TextBox {
							justify-content: space-between;
							font-size: 28rpx;
							margin-bottom: 24rpx;
						}

						.Line_Left {
							color: #757575;
							white-space: nowrap;
							/* 防止文本换行 */
							overflow: hidden;
							/* 隐藏超出部分 */
							text-overflow: ellipsis;
							/* 显示省略号 */
						}

						.Line_Right {
							min-width: 64rpx;
							text-align: right;
						}
					}
				}
			}
		}
	}
</style>